<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in imgArr" :key="item.id">
      <img :src="item.url" alt="" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
export default {
  data() {
    return {
      // banner 图片
      imgArr: [
        { id: 1, url: require('@/assets/images/01.jpg') },
        { id: 2, url: require('@/assets/images/02.jpg') },
        { id: 3, url: require('@/assets/images/03.jpg') },
        { id: 4, url: require('@/assets/images/04.jpg') }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  img {
    width: 100%;
    display: block;
  }
}
/deep/.van-swipe__indicator--active {
  background-color: #fc4254 !important;
  padding: 0 8px;
  border-radius: 20px;
}

/deep/.van-swipe__indicator {
  background-color: #fff;
  opacity: 1;
}
</style>
